import { ComponentProps, VueComponent } from "vue3-oop"
import { Form } from 'ant-design-vue';

import FdnGrid from "../widgets/_grid/fdn-grid";
import moduleCss from './index.module.scss'
import scrollBarCss from '@/styles/scrollbar.module.scss'

import { FormData } from '../types'

interface IProps {
  formData: FormData
}
export default class FdnDraft extends VueComponent<IProps> {
  static defaultProps: ComponentProps<IProps> = {
    formData: {}
  }

  constructor(
  ){
    super();
  }
  
  render() {
    return (
      <Form 
        class={[
          moduleCss['fdn-draft'],
          scrollBarCss['scrollbar-y'],
          'designer-draft-form'
        ]}
        labelCol={{
          style:{width:`${this.props.formData.labelWidth}px`}
        }}
        labelAlign={this.props.formData.labelAlign as any}
      >
        <FdnGrid
          formData={this.props.formData}
          widgetNode={this.props.formData.nodeTree}
        />
      </Form>
    )
  }
}